<style lang="less" scoped>
    .maintenancerecord {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        //display: flex;
    }
</style>
<template>
    <div class="maintenancerecord">
        <!--<card-table
            cardtitle="工单列表"
            addbuttext="新建工单"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            @add="add"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="myorderdata">
        </card-table>-->
        <!--<my-card cardtitle="当前订单：" :showright="false">
            <Table :columns="ordercolumns" :data="myorderdata" style="margin-bottom: 10px"></Table>
        </my-card>-->
        <my-card v-if="$route.params.id != 'all'" cardtitle="当前设备：" :showright="false">
            <Table :columns="sbcolumns" :data="sbdata" style="margin-bottom: 10px"></Table>
        </my-card>
        <card-table
            style="margin-top: 10px"
            cardtitle="维保记录"
            addbuttext="添加维保信息"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            @add="add"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="data">
        </card-table>
        <Modal
            v-model="addDeviceDetails"
            title="添加维保信息"
            :loading="addDeviceDetailsLoading"
            @on-ok="addDeviceDetailsOk"
            @on-cancel="addDeviceDetailsClose">
            <Form :model="addDeviceDetailsForm" :label-width="120" ref="addDeviceDetailsForm" :rules="rule">
                <FormItem label="维保时间：" prop="time">
                    <DatePicker v-model="addDeviceDetailsForm.time"  :options="options3" format="yyyy年MM月dd日" type="date" placeholder="请输入维保时间" style="width: 200px"></DatePicker>
                    <!--<Input v-model="addDeviceDetailsForm.time" placeholder="请输入维保时间" :maxlength="16" style="width: 200px"></Input>-->
                </FormItem>
                <FormItem label="维保类型：" prop="type">
                    <RadioGroup v-model="addDeviceDetailsForm.type">
                        <Radio label="小保"></Radio>
                        <Radio label="大保"></Radio>
                    </RadioGroup>
                    <!--<Input v-model="addDeviceDetailsForm.type" placeholder="请输入维保类型" :maxlength="16" style="width: 200px"></Input>-->
                </FormItem>
                <FormItem label="负责人：" prop="person">
                    <Input v-model="addDeviceDetailsForm.person" placeholder="请输入负责人" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="备注：" prop="remark">
                    <Input v-model="addDeviceDetailsForm.remark" placeholder="请输入备注" type="textarea" :maxlength="80" style="width: 80%"></Input>
                    <!--<Input v-model="addDeviceDetailsForm.remark" placeholder="请输入备注" :maxlength="16" style="width: 200px"></Input>-->
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    export default {
        name: 'addDeviceDetails',
        props: ['id'],
        data () {
            return {
                /*添加维保信息*/
                addDeviceDetails: false,
                addDeviceDetailsLoading: true,
                addDeviceDetailsForm: {
                    time: Date.now(),
                    type: '小保',
                    person: '',
                    remark: ''
                },
                options3: {
                    disabledDate (date) {
                        return date.valueOf() > Date.now();
                    }
                },
                /* ----- ------------------  */
                sid: null,
                sbcolumns: [
                    {
                        title: '设备编号',
                        key: 'number'
                    },
                    {
                        title: '设备名称',
                        key: 'name'
                    },
                    {
                        title: '负责人',
                        key: 'person'
                    }
                ],
                sbdata: [
                    {
                        number: '111',
                        name: '111',
                        person: '111'
                    }
                ],
                ordercolumns: [
                    {
                        title: '订单编号',
                        key: 'nub',
                        width: 180
                    },
                    {
                        title: '客户订单编号',
                        key: 'customernub',
                        width: 180
                    },
                    {
                        title: '客户信息',
                        key: 'customermsg',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.customermsg.name),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '编号：' + params.row.customermsg.nub),
                                    h('p', '名称：' + params.row.customermsg.name),
                                    h('p', '地址：' + params.row.customermsg.address),
                                    h('p', '联系人：' + params.row.customermsg.contacts),
                                    h('p', '联系电话：' + params.row.customermsg.phone)
                                ])
                            ])
                        }
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 120,
                        render: (h, params) => {
                            return h('span', params.row.number + params.row.unit)
                        }
                    },
                    {
                        title: '产品',
                        key: 'product',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.product.name),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '编号：' + params.row.product.nub),
                                    h('p', '名称：' + params.row.product.name),
                                    h('p', '单位：' + params.row.product.unit),
                                    h('p', '版本号：' + params.row.product.version)
                                ])
                            ])
                        }
                    }
                ],
                columns: [
                    {
                        title: '维保时间',
                        key: 'time'
                    },
                    {
                        title: '保养类型',
                        key: 'type'
                    },
                    {
                        title: '负责人',
                        key: 'person'
                    },
                    {
                        title: '备注',
                        key: 'remark'
                    }
                ],  //  表格列
                myorderdata: [
                ],
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '维保时间',
                        value: 'time'
                    },
                    {
                        label: '保养类型',
                        value: 'type'
                    },
                    {
                        label: '负责人',
                        value: 'person'
                    }/*,
                    {
                        label: '备注',
                        value: 'remark'
                    }*/
                ],  //  搜索下拉列表
                defaultSelete: 'person',  //  搜索下拉列表默认值
                searchForm: {
                    'time': '',
                    'type': '',
                    'person': '',
                    'remark': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '维保时间',
                        key: 'time',
                        placeholder: '输入维保时间'
                    },
                    {
                        label: '保养类型',
                        key: 'type',
                        placeholder: '输入保养类型'
                    },
                    {
                        label: '负责人',
                        key: 'person',
                        placeholder: '输入负责人'
                    },
                    {
                        label: '备注',
                        key: 'remark',
                        placeholder: '输入备注'
                    }
                ],  //  搜索表单item
                current: null
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '81'
                    }) ? true : false
                },
                deep: true
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addDeviceDetails = true
            },
            refresh () {
                console.log('customer触发了刷新事件')
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            },
            addDeviceDetailsOk () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                let form = this.addDeviceDetailsForm
                form.id = this.$route.params.id
                form.name = this.sbdata.name
                form.time = this.addDeviceDetailsForm.time/* + (new Date().getHours() * 3600 * 1000) + (new Date().getMinutes() * 60 * 1000)*/
                console.log(form)
                this.http.addDeviceDetails(this, form)
            },
            addDeviceDetailsClose () {
            }
        },
        components: {
            CardTable,
            MyCard
        },
        activated: function () {
            console.log(this.sid, this.$route.params.id)
            if (this.sid != null && this.sid != this.$route.params.id) {
                console.log('重新请求')
                this.sid = this.$route.params.id
                this.http.getAllDeviceDetails(this, {id: this.$route.params.id})
            }
        },
        mounted: function () {
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '81'
            }) ? true : false
            this.http.getAllDeviceDetails(this, {id: this.$route.params.id})
            this.sid = this.$route.params.id
        }
    };
</script>
